<template>
  <d2-container>
    <search_main :list="formLine" :search="queryForm"/>
    <el-card style="margin-top: 5px;">
      <el-button type="primary" size="small" icon="el-icon-plus" style="margin-left: 3px"  @click="openChildModal()">添加</el-button>
      <el-table :data="list" style="width: 100%">
        <el-table-column  prop="name" label="角色名称" align="center"></el-table-column>
        <el-table-column  prop="deptName" label="所属部门" align="center"></el-table-column>
        <el-table-column label="是否启用" align="center">
          <template slot-scope="scope">
            <el-tag size="small" type="danger" v-if="scope.row.state===0">禁用</el-tag>
            <el-tag size="small" type="success" v-if="scope.row.state===1">启用</el-tag>
          </template>
        </el-table-column>
        <el-table-column  prop="createName" label="创建人" align="center"></el-table-column>
        <el-table-column  prop="createTime" label="创建时间" align="center"></el-table-column>
        <el-table-column  prop="remark" label="描述信息" align="center"></el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="sysMenu(scope.row)">设置权限</el-button>
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" style="color: #ff2222" size="small" @click="delRole(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <paging :page="page" :currentChange="currentChange" :sizeChange="sizeChange" />
    </el-card>
    <modal ref="modal" :dept="dept" :deptTree="deptTree" :initList="initList" />
    <sys_menu  ref="drawer" :menus="menus" :powers="powers" :menuTree="menuTree" />
  </d2-container>
</template>

<script>
// eslint-disable-next-line camelcase
import search_main from '@/views/components/select-form'
import paging from '@/views/components/paging'
import { deleteRole, rolePage } from '@/api/system/role'
import modal from './modal'
// eslint-disable-next-line camelcase
import sys_menu from './sys-role'
import { menuAndAuth } from '@/api/system/menu'
import util from '@/libs/util'
import { getUserDept } from '@/api/system/dept'

export default {
  components: {
    search_main, paging, modal, sys_menu
  },
  data () {
    return {
      formLine: [
        { type: 'input', key: 'name', label: '角色名称', dataType: 'string' },
        {
          type: 'radio',
          key: 'state',
          label: '是否启用',
          // default: '1',
          dataType: 'number',
          options: [{ value: '1', label: '启用' }, { value: '0', label: '禁用' }]
        }
      ],
      list: [],
      formParam: {},
      menus: [],
      powers: [],
      menuTree: [],
      powerVisible: false,
      dept: [],
      deptTree: [],
      page: {
        size: 10,
        total: 0,
        current: 1
      }
    }
  },
  created () {
    this.initList()
    this.initTree()
    this.initUserDept()
  },
  methods: {
    initList () {
      rolePage({ ...this.formParam, ...this.page }).then(e => {
        if (e && e.records) {
          this.list = e.records
          this.page = {
            current: parseInt(e.current),
            size: parseInt(e.size),
            total: parseInt(e.total)
          }
        }
      })
    },
    initTree () {
      menuAndAuth().then(res => {
        if (res && res.menus) {
          this.menus = res.menus || []
          this.powers = res.auth || []
          this.menuTree = res.auth.length && res.auth.length > 0 && util.tree(res.menus, 'pid', 'children')
        }
      })
    },
    initUserDept () {
      getUserDept().then(res => {
        if (res && res.length && res.length > 0) {
          const defaultDept = { id: '0', name: '管理组' }
          const tree = util.tree(res, 'pid', 'children')
          this.dept = (util.isSuper() && [defaultDept, ...res]) || res
          this.deptTree = (util.isSuper() && [defaultDept, ...tree]) || tree
        }
      })
    },
    queryForm (e) {
      this.formParam = e
      this.initList()
    },
    sizeChange (count) {
      this.page.size = count
      this.initList()
    },
    currentChange (count) {
      this.page.current = count
      this.initList()
    },
    handleEdit (row) {
      this.openChildModal(row)
    },
    openChildModal (param) {
      this.$refs.modal.openModal(param)
    },
    sysMenu (row) {
      this.$refs.drawer.visible = true
      this.$refs.drawer.roleId = row.id
      this.$refs.drawer.initUserMenu()
    },
    delRole (row) {
      util.openDel(this, { roleId: row.id }, `角色-${row.name}`, deleteRole, this.initList)
    }
  },

}
</script>

<style scoped>

</style>
